<template>
	<view class="contain" :style="{ 'padding-top': top + 'px' }">
		<view class="fixed-top flex h-44 bg-color-f3" :style="{'padding-top': top + 'px'}">
			<view @click="back(1)" class="flex f-a-c f-j-c padding-lr12 van-icon van-icon-arrow-left f20-size"></view>
			<view class="flex flex-1 f-a-c margin-r4">
				<!-- <view @click="go('/pages/search/index')" class="flex flex-1 f-a-c h-32 bg-color-w b-radius-30 padding-lr10">
					<text class="flex f-a-c van-icon van-icon-search f16-size margin-r4"></text>
					<text class="t-color-9">{{i18n['搜索商品']}}</text>
				</view> -->
			</view>
			<!-- <view @click="$refs.menuBtn.openShare();" class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-share-o f20-size"></view> -->
			<view @click="$refs.menuBtn.open()" class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-bars f20-size"></view>
			<!-- <view @click="go('/pages/cart/index?type=goods')" class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-shopping-cart-o f20-size "></view> -->
			

			<view class="padding-lr2"></view>
			<xcx-header></xcx-header>
		</view>
		<view :style="{'padding-top': top+44+'px'}"></view>
		<view class="wrap-banner" >
			<swiper class="wrap-banner" @change="changeSwiper" :indicator-dots="false" :loop="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item @click="previewImg(item)" v-for="item in banner">
					<view class=" h100 bg-img" :style="item | bgimg(700)+''"></view>
				</swiper-item>
			</swiper>
			<view class="flex f-a-c f-j-c wrap-dot  b-radius-30 t-color-w f10-size">{{bannerIndex+1}}/{{banner.length}}</view>
		</view>







		<view class="padding-12">
			<view class="bg-color-w b-radius-10 padding-12" v-if="detail.title">
				<view class="f13-size f-w-b margin-t6">{{detail.title}}</view>
			</view>






			<view class="bg-color-w b-radius-10 padding-12 margin-t12">




				<view class="flex padding-tb8 justify-between" v-if="detail.petBreeds">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物品种</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.petBreeds}}</view>
				</view>
				<view class="flex padding-tb8 justify-between" v-if="detail.intro">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物信息</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.intro}}</view>
				</view>
				<view class="flex padding-tb8 justify-between" v-if="detail.petStatus">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物状态</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.petStatus}} </view>
				</view>

				<view class="flex padding-tb8 justify-between" v-if="detail.petGender">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物性别</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.petGender}} </view>
				</view>
				<view class="flex padding-tb8 justify-between" v-if="detail.petAge">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物年龄</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.petAge}} </view>
				</view>
				<view class="flex padding-tb8 justify-between" v-if="detail.petMedicine">
					<view class="flex f-s-0 f12-size t-color-9 margin-r10">宠物医疗</view>
					<view  class="flex f-s-0 f12-size t-color-9">{{detail.petMedicine}} </view>
				</view>
					<view class="flex padding-tb8 justify-between" v-if="detail.mobile">
						<view class="flex f-s-0 f12-size t-color-9 margin-r10">领养电话</view>
						<view  class="flex f-s-0 f12-size t-color-9">{{detail.mobile | fixNumber}} </view>
					</view>
					<view class="flex padding-tb8 justify-between" v-if="detail.contacts">
						<view class="flex f-s-0 f12-size t-color-9 margin-r10">联系人</view>
						<view  class="flex f-s-0 f12-size t-color-9">{{detail.contacts}} </view>
					</view>


			</view>


		</view>
		<view class="flex f-a-c f-j-c no-more t-color-9 f12-size margin-t2">领养要求</view>
		<view class="padding-tb6"></view>
		<view class="padding-lr20 ">
		<rich-text :nodes="detail.content | html"></rich-text>
		<br>
		</view>
		<view v-if="isIphonex" class="padding-15"></view>
		<view  :style="{'padding-bottom': isIphonex ? '84px' : '50px'}"></view>
		<view class="fixed-top bottom-btn bg-color-w flex  f-j-s padding-lr12 h-50 box-c" :style="{'padding-bottom': isIphonex ? '34px' : ''}">




					<view    class="flex f-r f-a-c f-j-c flex-1 bg-color-p t-color-w f12-size b-radius-30" @click="go('/pages/chat/chat?id='+detail.memberId)">


							<text class="flex f-a-c van-icon van-icon-chat-o f18-size "></text>
							<text class="f12-size  margin-t2">在线沟通</text>


					</view>





		</view>





		<uni-popup ref="couponList" type="bottom">
			<view class="safe-area wrap-popup-radius bg-color-f7">
				<view class="flex f-j-s f-a-c padding-12">
					<view class="flex f-s-0 w-30"></view>
					<view class="f16-size">{{i18n['优惠券']}}</view>
					<view @click="$refs.couponList.close()" class="flex f-s-0 f-a-c f-j-c van-icon van-icon-cross w-30"></view>
				</view>
				<coupon-list :list="couponList"></coupon-list>
				<view class="padding-10"></view>
			</view>
		</uni-popup>


		<menu-btn ref="menuBtn" :url="currentUrl" :title="sharetitle" :img="shareimg" ></menu-btn>
		<group-list :goodsId="id" @joinGroup="joinGroup" ref="wrapgroup"></group-list>
		<notice ></notice>
	</view>
</template>
<style scoped>
@import url('../../../static/css/goods/detail.css');
@import url('../../../static/css/color.css');
.order-num {
	min-width: 15px;
	padding: 0 2px;
	position: absolute;
	top: -6px;
	right: 0px;
}

.text-wrapper_7 {
	margin-right:15px;
		padding: 10rpx 16rpx;
		background-color: #ededed;
		border-radius: 40rpx;
		/* height: 54rpx; */
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #000000;
	}



	.text-wrapper_active {
		background-color: #ffbd52;
		color: #fff;

	}

	.text-wrapper_active .font_6 {}

	/* .text_11 {
		color: #ffffff;
	} */


</style>
<script>
	import couponList from '@/components/common/couponlist.vue';
	import groupList from '@/components/shops/components/grouplist.vue';
	import shopSpread from '@/components/shops/components/shopspread.vue';
	// const API = require('@/utils/api/shops.js').default;
	const API = require('@/utils/api/common.js').default;
	const $ = require('@/utils/api.js');
	let self;
	let inter;
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				currentUrl: '',
				appName: this.$mSettingConfig.appName,
				shareimg:'',
				sharetitle:'',
				
				detail:{},
				cartNum: uni.getStorageSync('cartNum'),
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				goods: '',
				id: '',
				banner: [],
				bannerIndex: 0,
				goodsParams: [],
				skuInfoList: [],//规格属性
				skuList: [],//规格价格表
				currentSku:[],
				isSingleSku:false,//是否是单一的商品
				chooseSkuList: [],
				sku: '',//选中规格后的商品信息
				attrSymbolPath: '',
				num: 1,
				shop: '',
				isLike: false,
				fahuo: '',
				couponList: [],
				commentList: [],
				now: 0,
				now1: 0,
				day: 0,
				hour: 0,
				minute: 0,
				second: 0,
				group: '',
				groupId: '',
				joinGroupId: '',
				isShareGroup: false,
				groupList: [],
				pintuanNum: 0,
				groupListConfig: [],
				groupConfig: '',
			};
		},
		onLoad: function(options) {
			self = this;
			this.id = options.id ? options.id : 6;
			this.joinGroupId = options.joinId ? options.joinId : '';
			
			this.currentUrl = `${this.$mConfig.hostUrl}/pages/other/salvation/detail?id=`+this.id+`&inviteCode=`+getApp().globalData.inviteCode;
			
		},
		onShow() {
			this.init();
		},
		filters: {
			fixNumber: function(value) {

				var tel = value;
				tel = "" + tel;
				var tel1 = tel.substr(0,3) + "****" + tel.substr(8)
				console.log(tel1);
				return tel1;
			}
		},
		methods: {
			...mapMutations(['setCartNum']),
			async getdetail() {
				await this.$http
					.get(`${API.assistDetail}/`+this.id, {

					})
					.then(r => {

						this.detail = r.data;

								self.banner =this.detail.images.split(',');
								
								
								this.shareimg = self.banner[0]
								this.sharetitle =  self.appName+"-"+this.detail.title
					})
					.catch(() => {
						this.loading = false;
					});
			},

			getImgs(imgs) {
				if(!imgs){return;}

				imgs =  imgs.replaceAll('|',',');

				if(imgs.indexOf(',') > 0) {
					return imgs.split(',')
				}else{
					return [imgs]
				}
			},


			clearData() {
				if(this.isShareGroup){return;}//分享链接一直保持参团信息
				this.group = '';
				this.groupId = '';
			},
			oriPrice() {
				if(this.skuList.length > 0) {
					return this.skuList[0]['oriPrice']
				}else{
					return ''
				}
			},
			isMS() {
				return self.goods.type == 2
			},
			isPT(type) {//1普通拼团>>2阶梯拼团
				if(type){
					if(type == 1) {
						return self.goods.type == 3 && self.goods.groupType == 1
					}
					if(type == 2) {
						return self.goods.type == 3 && self.goods.groupType == 2
					}
				}else{
					return self.goods.type == 3
				}
			},
			getMStype(type) {
				if(type == 'start') {
					return self.now < self.goods.seckillBeginTime
				}
				if(type == 'in') {
					return self.now >= self.goods.seckillBeginTime && self.now <= self.goods.seckillEndTime
				}
				if(type == 'end') {
					return self.now > self.goods.seckillEndTime
				}
			},

			changeSwiper(e) {
				self.bannerIndex = e.detail.current;
			},
			like() {
				$.ajax({
					url: API.likeGoodsApi,
					data: {
						goodsId: self.id
					},
					method: 'POST',
					success(res) {
						$.$toast(self.i18n['操作成功']);
						self.isLike = !self.isLike;
					}
				})
			},



			init() {
				// this.getDetail();
				this.getdetail();
				// this.getCommonList();
			},
		},
		onHide() {
			clearInterval(inter);
		},
		created() {
		},
		computed: {
			i18n() {
				return this.$t('goodsdetail')
			},
		},
		mounted() {},
		destroyed() {},
		components: {couponList,groupList,shopSpread},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
